<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>添加乘客</title>
	<link rel="stylesheet" href="/css/layui.css">
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="/css/item.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		.layui-row {
			margin-top: 50px;
		}

		.offer {
			width: 90px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			font-size: 16px;
			border-radius: 4px;
		}

		.return {
			width: 80px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			margin-top: -35px;
			margin-left: 130px;
			font-size: 16px;
			border-radius: 4px;
		}

		.vs--searchable .vs__dropdown-toggle {
			width: 70%;
			background-color: white;
			height: 36px;
		}

		ul[role="listbox"] {
			width: 70%;
			margin-left: 25px;
		}
	</style>
</head>

<body>
	

	<div class="layui-row" id="vue-root">
		<div class="layui-col-md6 layui-col-md-offset3">

			<div class="layui-form-item">
				<label class="layui-form-label">车牌号</label>
				<div class="layui-input-block">
					<select name="busId" data-vv-as="车牌号" class="input_select" v-model="item.busId"
						v-validate="'required'">
						<option disabled="disabled" :value="undefined">请选择车牌号</option>
						<option v-for="bus in buss" :key="bus.id" :value="bus.id" v-text="bus.name">
						</option>
					</select>
					<div class="checkout_state" v-text="err('busId')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">行进线路</label>
				<div class="layui-input-block">
					<select name="routeId" data-vv-as="行进线路" class="input_select" v-model="item.routeId"
						v-validate="'required'">
						<option disabled="disabled" :value="undefined">请选择校车行进线路</option>
						<option v-for="route in routes" :key="route.id" :value="route.id" v-text="route.name">
						</option>
					</select>
					<div class="checkout_state" v-text="err('routeId')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">随车老师</label>
				<div class="layui-input-block">
					<v-select multiple placeholder="请选择老师" label="name" :options="teachers" :reduce="item=>item.id"
						v-model="item.teacherIds"></v-select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">行驶时间段</label>
				<div class="layui-input-block">
					<input id="period" placeholder="请输入行驶时间段" class="layui-input" v-validate="'required'" name="period"
						data-vv-name="行驶时间段11" v-model="period">
					<div class="checkout_state" v-text="err('period')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	
	
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>


	<script src="/lib/laydate/laydate.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>
		Vue.component('v-select', VueSelect.VueSelect);
		var app = new Vue(merge({
			data: {
				item: {},
				url: '/pc/trip',
				buss: [],
				routes: [],
				teachers: [],
				period: null
			},
			created: function () {
				var schoolId = top_params().id;
				axios.get('/pc/bus/all/' + schoolId).then(function (res) {
					this.buss = res.data;
				}.bind(this));
				axios.get('/pc/route/all/' + schoolId).then(function (res) {
					this.routes = res.data;
				}.bind(this));
				axios.get('/pc/teacher/all/' + schoolId).then(function (res) {
					this.teachers = res.data;
				}.bind(this));

				this.init();
			},
			methods: {
				formatData: function (data) {
					if (data.startTime && data.endTime)
						this.period = data.startTime + ' - ' + data.endTime;
				},
			}
		}));

		laydate.render({
			elem: '#period',
			type: 'time',
			format: 'HH:mm:ss',
			range: true,
			done: function (value, date, endDate) {
				var a = value.split(' - ');
				app.item.startTime = a[0];
				app.item.endTime = a[1];
				app.period = value;
			}
		});


	</script>


</body>

</html>